<template>
  <div>
    <a-card title="下级分销商">
      <a-row :gutter="4">
        <a-col :span="8">
          <a-form :form="form" @submit="handleSubmit">
            <a-tabs default-active-key="1">
              <a-tab-pane tab="基本" key="1">
                <a-form-item
                  label="公司名称"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input v-decorator="['disbName']" />
                </a-form-item>
                <a-form-item
                  label="商户编号"
                  hidden
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input v-decorator="['disbNO']" disabled />
                </a-form-item>
                <a-form-item
                  label="上级编号"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input v-decorator="['superiorNumber']" />
                </a-form-item>
                <a-form-item
                  label="手机号"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input v-decorator="['mobile']" />
                </a-form-item>

                <a-form-item
                  label="初始密码"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input-password v-decorator="['password']" />
                </a-form-item>
                <a-form-item
                  label="开始日期"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-date-picker v-decorator="['startDate']" />
                </a-form-item>
                <a-form-item
                  label="截至日期"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-date-picker v-decorator="['endDate']" />
                </a-form-item>
                <a-form-item
                  label="分销等级"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-select v-decorator="['grade']">
                    <a-select-option value="1">基本分销</a-select-option>
                    <a-select-option value="2">中级分销</a-select-option>
                    <a-select-option value="3">高级分销</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="佣金比例"
                  :labelCol="{ span: 4 }"
                  :wrapperCol="{ span: 16 }"
                >
                  <a-input v-decorator="['commissionRate']" />
                </a-form-item>
              </a-tab-pane>
             
            </a-tabs>
            <a-form-item :wrapper-col="{ span: 12, offset: 8 }">
              <a-row :gutter="6">
                <a-col :span="12">
                  <a-button type="primary" html-type="submit"> 提交 </a-button>
                </a-col>
                <a-col :span="12">
                  <a-button @click="handleBack" type="danger">
                    返回
                  </a-button></a-col
                >
              </a-row>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="16">
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="data"
            :rowKey="(record) => record.id"
            :pagination="{
              total: Number(this.total),
              showSizeChanger: true,
              showQuickJumper: true,
              current: Number(this.current),
              pageSize: Number(this.pageSize),
              size: 'small',
              pageSizeOptions: ['5', '10', '25', '50'],
              onChange: handleTableChange,
              onShowSizeChange: handleTableChange,
              showTotal: (total) => `总计 ${total} 条交易记录`,
            }"
            :loading="loading"
          >
            <div slot="action" slot-scope="record">
              <a-space>
                <a-button
                  icon="edit"
                  size="small"
                  type="primary"
                  @click="showEdit(true, record)"
                >
                  编辑
                </a-button>
                <a-popconfirm
                  title="确定删除此记录吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="remove(record.id)"
                >
                  <a-button icon="delete" size="small" type="danger"
                    >删除</a-button
                  >
                </a-popconfirm>
              </a-space>
            </div>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
    <a-modal
      title="编辑分销商"
      :visible="visible"
      :width="680"
      @cancel="visible = false"
      :footer="false"
      :destroyOnClose="true"
    >
      <updateModel :queryEqument="featchDatas" :recordParams="recordParams" />
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "创建子分销商",
  data() {
    return {
      form: this.$form.createForm(this),
      recordParams: {},
      selectedRowKeys: [],
      loading: false,
      visible: false,
      columns: [
        {
          title: "序号",
          key: "index",
          customRender: function (_, __, i) {
            return i + 1;
          },
        },
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "所属医院",
          dataIndex: "company",
        },
        {
          title: "分销码",
          dataIndex: "imgimgimg",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [{ id: "1", name: "测试", company: "测试医院" }],
    };
  },
  methods: {
    handleSubmit() {},
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.tradeIds = this.selectedRowKeys;
    },
    //切换页面
    handleTableChange(pageNumber, pageSize) {
      this.current = pageNumber;
      this.pageSize = pageSize;
      this.getData();
    },
    remove(id) {
    },
    showEdit(visible = false, val = null) {
      this.visible = visible;
      this.recordParams = val;
    },
    featchDatas() {
    },
  },
};
</script>
